<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solt">返回</span>
      </div>
      <div class="div">
        <span v-if="(isJianCha === 'true' || isJianCha == true) && Number(morz) === 1" >门诊检查数据</span>
        <span v-if="(isJianCha === 'true' || isJianCha == true) && Number(morz) === 2" >住院检查数据</span>
        <span v-else-if="(isJianCha === 'false'|| isJianCha == false) && Number(morz) === 1">门诊检验数据</span>
        <span v-else-if="(isJianCha === 'false'|| isJianCha == false) && Number(morz) === 2">住院检验数据</span>
      </div>
      <div class="div" v-if="isJianCha === 'true'|| isJianCha == true " >
        <img v-show="morz != 0 && isEdit !== 0" src="../../../assets/蓝添加.png" @click="add()" alt="">
        <button v-show="morz != 0 && isEdit !== 0" style="background: none;border: none" class="solt" @click="add()"  >新增</button>
        <button v-show="morz == 0" style="background: none;border: none" class="solt" @click="queRen()" >确认</button>
      </div>
      <div class="div"  v-else-if="isJianCha === 'false' || isJianCha == false" >
<!--        @click="add()"-->
<!--        <img src="../../assets/蓝添加.png" alt="">-->
<!--        <button style="background: none;border: none" class="solt" >新增</button>-->
        <img v-show="morz != 0 && isEdit !== 0" src="../../../assets/蓝添加.png" @click="add()" alt="">
        <button v-show="morz != 0 && isEdit !== 0" style="background: none;border: none" class="solt" @click="add()"  >新增</button>
        <button v-show="morz == 0" style="background: none;border: none" class="solt" @click="queRen()" >确认</button>
      </div>
    </header>
    <div class="content">
      <div class="title">
        <a class="hengGang"></a>
        <span>个人基本信息</span>
      </div>
      <div class="personInfo">
        <ul>
          <!--          <li class="personHeader">接受评估人基本信息</li>-->
          <li>
            <p>
              <img class="photo" v-if="peopleList.PHOTO === null || peopleList.PHOTO === '' || peopleList.PHOTO === undefined"
                   src="../../../assets/photo.png" alt="">
              <img v-else :src="peopleList.PHOTO" alt="">
              <a style="font-weight: bold">{{peopleList.name}}</a>
              <a v-show="Number(peopleList.sex) === 1">男</a>
              <a v-show="Number(peopleList.sex)=== 2">女</a>
              <a v-show="peopleList.age!==null && peopleList.age > 0">{{peopleList.age}}岁</a>
            </p>
            <p>
              <span class="color">联系电话：
                <span>{{peopleList.phone}}</span>
              </span>
            </p>
<!--            <p>-->
<!--              <span class="color">初步诊断：-->
<!--                <span v-if="peopleList.DIAGNOSE === '' || peopleList.DIAGNOSE === null || peopleList.DIAGNOSE === undefined">-->
<!--                  未填写-->
<!--                </span>-->
<!--                <span v-else>{{peopleList.DIAGNOSE}}</span>-->
<!--              </span>-->
<!--            </p>-->
            <p>
              <span class="color">联系地址：
                <span>
                  {{peopleList.zuizhongAddress}}
                </span>
              </span>
            </p>
          </li>
        </ul>
      </div>
      <div class="title">
        <a class="hengGang"></a>
        <span v-if="(isJianCha === 'true'|| isJianCha == true) && Number(morz) == 1" >门诊检查数据</span>
        <span v-if="(isJianCha === 'true' || isJianCha == true)&& Number(morz) == 2" >住院检查数据</span>
        <span v-else-if="(isJianCha === 'false'|| isJianCha == false) && Number(morz) == 1">门诊检验数据</span>
        <span v-else-if="(isJianCha === 'false'|| isJianCha == false) && Number(morz) == 2">住院检验数据</span>
        <span v-else-if="(isJianCha === 'true'|| isJianCha == true) && Number(morz) == 0">检查数据</span>
        <span v-else-if="(isJianCha === 'false'|| isJianCha == false) && Number(morz) == 0">检验数据</span>
      </div>
      <van-sticky offset-top="44px">
        <div class="menu">
        <div class="search">
          <el-select v-model="jigou"
                     style="width: 170px"
                     filterable
                     @volumechange="clickJigou"
                     @focus="clickJigou"
                     @change="changePer"
                     :class="[jigou.length > 0 ? '' : 'noselect']"
                     :placeholder="jigouPlaceholder">
            <el-option
              v-for="item in optionJigou"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search">
          <el-select v-model="keshi"
                     style="width: 150px"
                     filterable
                     @volumechange="clickKeshi"
                     @focus="clickKeshi"
                     @change="changePer"
                     :class="[keshi.length > 0 ? '' : 'noselect']"
                     :placeholder="keshiPlaceholder">
            <el-option
              v-for="item in optionKeshi"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search">
          <el-select v-model="xiangmu"
                     style="width: 150px"
                     filterable
                     @volumechange="clickXiangmu"
                     @focus="clickXiangmu"
                     @change="changePer"
                     :class="[xiangmu.length > 0 ? '' : 'noselect']"
                     :placeholder="xiangmuPlaceholder">
            <el-option
              v-for="item in optionXiangmu"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search"
             @click="riqiShow = true"
             :class="[selectDate.length > 0 ? '' : 'noselect']"
             style="background: #fff;border-radius: 15px">
          <input class="DateInp noselect1" style=""
                 readonly
                 placeholder="报告日期"
                 v-model="selectDate"/>
<!--          :placeholder="riqiPlaceholder"-->

        </div>
      </div>
      </van-sticky>
      <van-empty
        style="width: 100%;height: 100%"
        v-if="listArr.length === 0"
        class="custom-image"
        description="暂无数据"
        :image="require('../../../assets/暂无数据.png')"
      >
      </van-empty>
      <div class="divList" :class="{select: item.select}" v-else-if="listArr.length > 0" v-for="(item, index) in listArr" :key="index">
        <div class="div_left">
<!--          <li v-if="isJianCha === 'true'">-->
<!--            <button v-show="isJianCha === 'true' && item.jianchaleibie === 1">CT</button>-->
<!--            <button v-show="isJianCha === 'true' && item.jianchaleibie === 2">B超</button>-->
<!--          </li> v-else-->
          <li >
            <img src="../../../assets/保险编号.png" style="width: 18px;height: 18px;" alt="">
<!--            <button v-show="isJianCha === 'false' && item.leibie === 1">门</button>-->
<!--            <button v-show="isJianCha === 'false' && item.leibie === 2">住</button>-->
          </li>
        </div>
        <ul class="ulList"
            @click="LookHis(item)">
          <!--        <li class="li_header" style="justify-content: space-between">-->
          <!--          <div style="display: flex;align-items: center">-->
          <!--            <img class="photo" v-if="item.PHOTO === null || item.PHOTO === '' || item.PHOTO === undefined" src="../../assets/男患者@2x.png" alt="">-->
          <!--            <img class="photo" :src="item.PHOTO" v-else alt="">-->
          <!--            <a>{{item.NICK_NAME}}</a>-->
          <!--            <a v-show="Number(item.SEX) === 1">男</a>-->
          <!--            <a v-show="Number(item.SEX) === 2">女</a>-->
          <!--            <a>{{item.age}}岁</a>-->
<!--                      <button v-show="isJianCha === 'true' && item.jianchaleibie === 1">CT</button>-->
<!--                      <button v-show="isJianCha === 'true' && item.jianchaleibie === 2">B超</button>-->
          <!--          </div>-->
          <!--        </li>-->
<!--          <li v-if="isJianCha === 'true'">-->
<!--            <span>病历号码：</span>-->
<!--            <span>{{item.binglihaoma}}</span>-->
<!--          </li>-->
<!--          <li v-else-if="isJianCha === 'false'">-->
<!--            <span>病历号码：</span>-->
<!--            <span>{{item.bingliphone}}</span>-->
<!--          </li>-->
          <!--        -->
<!--          <li v-if="isJianCha === 'true'">-->
<!--            <span>检查编码：</span>-->
<!--            <span>{{item.bianma}}</span>-->
<!--          </li>-->
<!--          <li v-else-if="isJianCha === 'false'">-->
<!--            <span>检验编码：</span>-->
<!--            <span>{{item.bianma}}</span>-->
<!--          </li>-->
          <!--    临床诊断    -->
          <li v-if="isJianCha === 'true'|| isJianCha == true">
            <span>临床诊断：</span>
            <span style="width: 70%;display: block;white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">{{item.linchuangzhenduan}}</span>
          </li>
          <li v-else-if="isJianCha === 'false'|| isJianCha == false">
            <span>临床诊断：</span>
            <span style="width: 70%;display: block;white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">{{item.zhenduan}}</span>
          </li>
          <!--        -->
          <li v-if="isJianCha === 'true'|| isJianCha == true">
            <span>检查机构：</span>
            <span style="width: 70%;display: block;white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">{{item.jigou}}</span>
          </li>
          <li v-else-if="isJianCha === 'false'|| isJianCha == false">
            <span>检验机构：</span>
            <span style="width: 70%;display: block;white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;">{{item.jigou}}</span>
          </li>
          <!--        -->
          <li v-if="isJianCha === 'true'|| isJianCha == true">
            <span>送检科室：</span>
            <span>{{item.keshi}}</span>
          </li>
          <li v-else-if="isJianCha === 'false'|| isJianCha == false">
            <span>送检科室：</span>
            <span>{{item.keshi}}</span>
          </li>
          <!--        -->
          <li v-if="isJianCha === 'true'|| isJianCha == true">
            <span>检查项目：</span>
            <span>{{item.xiangmu}}</span>
          </li>
          <li v-else-if="isJianCha === 'false'|| isJianCha == false">
            <span>检验项目：</span>
            <span>{{item.xiangmu}}</span>
          </li>
          <!--        -->
          <li v-if="isJianCha === 'true'|| isJianCha == true">
            <span>送检日期：</span>
            <span>{{item.songjiantime}}</span>
          </li>
          <li v-else-if="isJianCha === 'false'|| isJianCha == false">
            <span>送检日期：</span>
            <span>{{item.songjiantime}}</span>
          </li>
          <li>
            <span>报告日期：</span>
            <span>{{item.riqi}}</span>
          </li>
          <li class="liBtn" v-show="isEdit !== 0 && item.hour !== 0">
<!--            <a v-show="morz != 0"-->
<!--               @click.stop="deleteList(item, index)"-->
<!--               style=""-->
<!--            >删除</a>-->
            <button @click.stop="update(item, index)">修改</button>
            <button class="delete" @click.stop="deleteList(item, index)">删除</button>

          </li>
        </ul>
<!--        <div class="div_right" >-->
<!--         <li>-->
<!--           <a v-show="morz != 0"-->
<!--             @click.stop="deleteList(item, index)"-->
<!--             style=""-->
<!--           >删除</a>-->
<!--         </li>-->
<!--        </div>-->
      </div>
    </div>
    <van-dialog v-model="delshow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确定删除本条记录吗？"
                @confirm="delConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-calendar v-model="riqiShow"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :value="selectDate"
                  :show-confirm="false"
                  :round="false"
                  type="range"
                  color="#1da4f2"
                  @confirm="onConfirm"
                  position="right" />
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'CheckData',
  data () {
    return {
      listArr: [],
      peopleList: [],
      isJianCha: this.$route.query.isJianCha,
      delshow: false,
      delIndex: 0,
      delID: 0,
      morz: this.$route.query.morz,
      jigou: '',
      keshi: '',
      xiangmu: '',
      jigouPlaceholder: '',
      keshiPlaceholder: '',
      xiangmuPlaceholder: '',
      riqiPlaceholder: '',
      optionXiangmu: [],
      optionKeshi: [],
      optionJigou: [],
      // 操作人id
      op_user_id: this.$route.query.myUserid,
      // 档案人id
      data_user_id: this.$route.query.userid,
      riqiShow: false,
      selectDate: '',
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(),
      startTime: '',
      endTime: '',
      isEdit: Number(this.$route.query.isEdit)
    }
  },
  mounted () {
    this.getPerson()
    if (this.$route.query.time !== undefined) {
      this.startTime = this.$route.query.time
      this.endTime = this.$route.query.time
      this.selectDate = this.startTime + ' - ' + this.endTime
    }
    if (this.isJianCha == 'true' || this.isJianCha == true) {
      this.getFindAllCheck()
      document.title = '历次检查数据'
      this.jigouPlaceholder = '检查机构'
      this.keshiPlaceholder = '检查科室'
      this.xiangmuPlaceholder = '检查项目'
      this.riqiPlaceholder = '检查日期'
    } else if (this.isJianCha == 'false' || this.isJianCha == false) {
      this.getFindAllInspection()
      document.title = '历次检验数据'
      this.jigouPlaceholder = '检验机构'
      this.keshiPlaceholder = '检验科室'
      this.xiangmuPlaceholder = '检验项目'
      this.riqiPlaceholder = '检验日期'
    }
  },
  methods: {
    // 日期转换
    formatDate (date) {
      // eslint-disable-next-line no-redeclare
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD
    },
    // 点击选择日期
    onConfirm (date) {
      const [start, end] = date
      this.riqiShow = false
      this.selectDate = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.startTime = this.formatDate(start)
      this.endTime = this.formatDate(end)
      this.changePer()
    },
    // 点击项目筛选
    clickXiangmu () {
      this.$http.findChooseXiangmu({data_user_id: this.data_user_id, jigou: this.jigou})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.optionXiangmu = [{
              value: '',
              label: '不限' + this.xiangmuPlaceholder
            }]
            for (var i = 0; i < res.data.data.length; i++) {
              var obj = {
                value: res.data.data[i].xiangmu,
                label: res.data.data[i].xiangmu
              }
              this.optionXiangmu.push(obj)
            }
          } else {
            Toast('网络错误')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击科室筛选
    clickKeshi () {
    //  findChooseKeShi
      this.$http.findChooseKeShi({data_user_id: this.data_user_id, jigou: this.jigou})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.optionKeshi = [{
              value: '',
              label: '不限' + this.keshiPlaceholder
            }]
            for (var i = 0; i < res.data.data.length; i++) {
              var obj = {
                value: res.data.data[i].keshi,
                label: res.data.data[i].keshi
              }
              this.optionKeshi.push(obj)
            }
          } else {
            Toast('网络错误')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击机构筛选
    clickJigou () {
      this.$http.findChooseJigou({data_user_id: this.data_user_id, jigou: this.jigou})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.optionJigou = [{
              value: '',
              label: '不限' + this.jigouPlaceholder
            }]
            for (var i = 0; i < res.data.data.length; i++) {
              var obj = {
                value: res.data.data[i].jigou,
                label: res.data.data[i].jigou
              }
              this.optionJigou.push(obj)
            }
          } else {
            Toast('网络错误')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    changePer () {
      if (this.isJianCha === 'true' || this.isJianCha == true) {
        this.getFindAllCheck()
      } else if (this.isJianCha === 'false'|| this.isJianCha == false) {
        this.getFindAllInspection()
      }
    },
    // 删除确认
    delConfirm () {
      if (this.isJianCha === 'true'|| this.isJianCha == true) {
        this.delJiancha()
      } else if (this.isJianCha === 'false'|| this.isJianCha == false) {
        this.delJianYan()
      }
      // deleteCheckById 检查  deleteInspectionById 检验
    },
    // 删除检查
    delJiancha () {
      this.$http.deleteCheckById({id: this.delID, morz: this.morz})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.listArr.splice(this.delIndex, 1)
            Toast('删除成功')
          } else {
            Toast('网络错误')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 删除检验
    delJianYan () {
      this.$http.deleteInspectionById({id: this.delID, morz: this.morz})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.listArr.splice(this.delIndex, 1)
            Toast('删除成功')
          } else {
            Toast('网络错误')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击修改按钮
    update (item, index) {
      if (this.isJianCha === 'true' || this.isJianCha == true) {
        this.$router.push({path: '/buildCheckData',
          query: {
            isJianCha: this.isJianCha,
            // 操作人id
            op_user_id: this.$route.query.myUserid,
            // 档案人id
            data_user_id: this.$route.query.userid,
            id: item.id,
            isEdit: 1
          }})
      } else if (this.isJianCha === 'false'|| this.isJianCha == false) {
        this.$router.push({path: '/buildJianYan',
          query: {isJianCha: this.isJianCha,
            // 操作人id
            op_user_id: this.$route.query.myUserid,
            // 档案人id
            data_user_id: this.$route.query.userid,
            id: item.id,
            isEdit: 1
          }})
      }
    },
    // 点击删除
    deleteList (item, index) {
      this.delID = item.id
      this.delIndex = index
      this.delshow = true
    },
    // 获取个人基本信息
    getPerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.$route.query.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 检验数据
    getFindAllInspection () {
      this.$http.findAllInspection({
        data_user_id: this.$route.query.userid,
        leibie: this.morz,
        keshi: this.keshi,
        jigou: this.jigou,
        xiangmu: this.xiangmu,
        startTime: this.startTime,
        endTime: this.endTime
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.listArr = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击跳转查看
    LookHis (item) {
      if (Number(this.morz) === 0) {
        if (this.isJianCha === 'true'|| this.isJianCha == true) {
          // this.$set(item, 'select', true)
          var data = JSON.parse(sessionStorage.getItem('tuWenData'))
          for (var i = 0; i < data.jianChaList.length; i++) {
            if (item.id === data.jianChaList[i].id) {
              Toast('不能添加重复数据')
              return false
            }
          }
          // eslint-disable-next-line eqeqeq
          if (item.select == false || item.select == true) {
            item.select = !item.select
          } else {
            this.$set(item, 'select', true)
          }
          // data.jianChaList.push(obj)
          // sessionStorage.setItem('tuWenData', JSON.stringify(data))
        } else if (this.isJianCha === 'false'|| this.isJianCha == false) {
          var data = JSON.parse(sessionStorage.getItem('tuWenData'))
          // var obj = {
          //   id: item.id,
          //   xiangmu: item.xiangmu,
          //   show: false,
          //   money: '',
          //   lishi: '1'
          // }
          for (var i = 0; i < data.jianYanList.length; i++) {
            if (item.id === data.jianYanList[i].id) {
              Toast('不能添加重复数据')
              return false
            }
          }
          // eslint-disable-next-line eqeqeq
          if (item.select == false || item.select == true) {
            item.select = !item.select
          } else {
            this.$set(item, 'select', true)
          }
          // data.jianYanList.push(obj)
          // sessionStorage.setItem('tuWenData', JSON.stringify(data))
        }
        // this.$router.history.go(-1)
      } else {
        if (this.isJianCha === 'true'|| this.isJianCha == true) {
          this.$router.push({path: '/buildCheckData',
            query: {
              isJianCha: this.isJianCha,
              // 操作人id
              op_user_id: this.$route.query.myUserid,
              // 档案人id
              data_user_id: this.$route.query.userid,
              id: item.id,
              isEdit: 0
            }})
        } else if (this.isJianCha === 'false'|| this.isJianCha == false) {
          this.$router.push({path: '/buildJianYan',
            query: {isJianCha: this.isJianCha,
              // 操作人id
              op_user_id: this.$route.query.myUserid,
              // 档案人id
              data_user_id: this.$route.query.userid,
              id: item.id,
              isEdit: 0
            }})
        }
      }
    },
    // 获取当前人 的历次检查记录
    getFindAllCheck () {
      this.$http.findAllCheck({
        data_user_id: this.$route.query.userid,
        'morz': this.morz,
        keshi: this.keshi,
        jigou: this.jigou,
        xiangmu: this.xiangmu,
        startTime: this.startTime,
        endTime: this.endTime
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.listArr = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击新增
    add () {
      // 检查
      if (this.isJianCha === 'true'|| this.isJianCha == true) {
        this.$router.push({path: '/buildCheckData',
          query: {
            isJianCha: this.isJianCha,
            // 操作人id
            op_user_id: this.$route.query.myUserid,
            // 档案人id
            data_user_id: this.$route.query.userid,
            morz: this.morz
          }})
      } else if (this.isJianCha === 'false'|| this.isJianCha == false) {
        // 检验
        this.$router.push({path: '/buildJianYan',
          query: {
            isJianCha: this.isJianCha,
            // 操作人id
            op_user_id: this.$route.query.myUserid,
            // 档案人id
            data_user_id: this.$route.query.userid,
            morz: this.morz
          }})
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 确认按钮
    queRen () {
      var data = JSON.parse(sessionStorage.getItem('tuWenData'))
      if (this.isJianCha === 'true'|| this.isJianCha == true) {
        for (var i = 0; i < this.listArr.length; i++) {
          var obj = {
            id: this.listArr[i].id,
            xiangmu: this.listArr[i].xiangmu,
            show: false,
            money: this.listArr[i].money,
            lishi: '1'
          }
          if (this.listArr[i].select == true) {
            data.jianChaList.push(obj)
          }
        }
      } else if (this.isJianCha === 'false'|| this.isJianCha == false) {
        for (var i = 0; i < this.listArr.length; i++) {
          var obj = {
            id: this.listArr[i].id,
            xiangmu: this.listArr[i].xiangmu,
            show: false,
            money: this.listArr[i].money,
            lishi: '1'
          }
          if (this.listArr[i].select == true) {
            data.jianYanList.push(obj)
          }
        }
      }
      sessionStorage.setItem('tuWenData', JSON.stringify(data))
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
    overflow: scroll;
  }
  header{
    width: 100vw;
    height: 44px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px #E5E5E5;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .div{
    width: 33%;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    justify-content: center;
  }
  .div:nth-child(3) {
    justify-content: flex-end;
  }
  .div:nth-child(3) button{
    margin-right: 15px;
  }
  .div:nth-child(3) img{
    width: 12px;
    height: 12px;
    margin-right: 3px;
  }
  .solt{
    color: #1DA4F2;
  }
  .divList{
    width: 92%;
    border-radius: 10px;
    margin: 10px auto auto auto;
    background: white;
    padding: 5px 0px;
    box-sizing: border-box;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
    display: flex;
  }
  .div_left{
    width: 10%;
    /*background: #F9D739;*/
  }
  .div_right{
    width: 15%;
  }
  .div_left li,
  .div_right li{
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
  }
  .div_right a{
    width:35px;
    height: 18px;
    display:flex;
    align-items:center;
    justify-content: center;
    color: #1da4f2 !important;
    border-radius: 3px;
    background: rgba(29, 164, 242, 0.1);
    margin-right:  5px;
    padding: 3px;
    box-sizing: border-box;
  }
  .div_left button{
    width:25px;
    height: 18px !important;
    color: white !important;
    background: #1DA4F2  !important;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
  }
  .ulList{
    width: 85%;
  }
  .divList:last-child{
    margin-bottom: 30px;
  }
  .ulList li{
    width: 100%;
    height: 25px;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    display: flex;
    align-items: center;
  }
  .ulList li span:nth-child(2) {
    flex-shrink: 0;
    width: 60%;
    /*//单行*/
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .liBtn{
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .liBtn button{
    width: 60px;
    height: 29px;
    font-size: 15px;
    border-radius: 4px;
    color: #1DA4F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    background: transparent;
    border: 1px solid #1DA4F2;
  }
  .delete{
    background: transparent !important;
    border: 1px solid #E5E5E5 !important;
    color: #333!important;
  }
  .photo{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
  .li_header{
    height: 44px !important;
    display: flex;
    align-items: center;
  }
  .li_header a{
    margin-left: 10px;
    font-size: 15px !important;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333 !important;
  }
  /deep/ .van-calendar__body{
    margin-bottom: 50px;
  }
  /deep/ .van-empty__image {
    width: 160px;
    height: 100px;
  }

  /deep/ .van-empty__image img {
    width: 160px;
    height: 100px;
  }
  /deep/ .van-empty{
    width: 100%;
    height: 50vh !important;
  }
  .title{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    background: #ffffff;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin: 0 8px 0 15px;
  }
  .personInfo {
    width: 92%;
    /*background: #FFFFFF;*/
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    color: white;
  }
  .personInfo ul{
    width: 100%;
    height: 100%;
    /*padding: 5px 0;*/
    box-sizing: border-box;
    font-family: "PingFang SC";
  }
  .color{
    color: #fff;
    display: flex;
  }
  .personInfo img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
  .personHeader{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background: #1DA4F2;
    color: #FFFFFF;
    font-size: 15px;
  }
  .personInfo ul li{
    width: 100% !important;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .personInfo p{
    width: 100%;
    padding: 5px 0 0 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
  .personInfo p:last-child{
    margin-bottom: 5px;
  }
  .personInfo p:first-child{
    margin-top: 3px;
  }
  .personInfo p a{
    margin-left: 10px;
    font-size: 15px;
  }
  .select{
    background: rgba(29, 164, 242, 1);
  }
  .select> ul li{
    color: white !important;
  }

/*/筛选框*/
  .menu{
    height: 44px;
    width: 100%;
    background: #FFFFFF;
    /*background: #A5DBFA;*/
    display: flex;
    align-items: center;
    overflow-x: scroll;
  }
  .menu::-webkit-scrollbar{
    display: none;
  }
  .search{
    margin-left: 8px;
  }
  .search:last-child{
    margin-right: 8px;
  }
  .search>input::placeholder{
    color: #1DA4F2 !important;
  }
  /*/deep/ .select1 {*/
  /*  color: #fff !important;*/
  /*  background: rgba(29, 164, 242, 1) !important;*/
  /*  border: 1px solid rgba(29, 164, 242, 1) !important;*/
  /*  border-radius: 15px;*/
  /*}*/
  .DateInp{
    width: 180px;
    height: 32px;
    border-radius: 15px;
    border: 1px solid #1DA4F2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    box-sizing: border-box;
    -webkit-appearance: none;
    outline: none;
    background: #1DA4F2;
    line-height: 32px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  }
  .DateInp::placeholder{
    color: #fff !important;
  }
  .DateInp:focus{
    border-color: #fff !important;
  }

  .noselect1{
    color: #1DA4F2 !important;
    border-radius: 15px;
    background: rgba(29, 164, 242, 0.2) !important;
    border: 1px solid rgba(29, 164, 242, 0.2) !important;
  }
  /deep/ .el-input--small .el-input__inner{
    color: #1DA4F2 !important;
    border-radius: 15px;
    background: rgba(29, 164, 242, 0.2) !important;
    border: 1px solid rgba(29, 164, 242, 0.2) !important;
  }
  /deep/ .is-focus .el-input__inner{
    background: rgba(29, 164, 242, 1) !important;
    border: 1px solid rgba(29, 164, 242, 1) !important;
    border-radius: 15px;
    color: white !important;
  }
  /deep/ .el-icon-arrow-up:before {
    content: "\E6E1";
    color: #1DA4F2 !important;
  }
  /deep/ .el-input__inner::placeholder{
    color:  #1DA4F2 !important;
  }
  /deep/  .is-focus .el-input__inner::placeholder{
    color:  #fff !important;
  }
  /deep/ .is-focus .el-icon-arrow-up:before {
    content: "\E6E1";
    color: #fff !important;
  }

</style>
